<template>
  <div class="Manage">
    <Header :zIndex="3" ref="Header"></Header>
    <div class="content-wrap">
      <center>
        <div class="top">
          <ul class="daohang_list">
            <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
            <li><router-link class="list_item on" :to="{ path: '/Manage' }">投票管理</router-link></li>
            <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
            <li><router-link class="list_item" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
            <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
          </ul>
        </div>
        <ul class="active_list" v-if="actData.length > 0">
          <li class="active_item" v-for="(item, index) in actData" :key="index">
            <div class="left_bar">
              <div class="active_name">活动名称：</div>
              <div class="active_time">{{ item.title }}</div>
              <div class="cjshijian">
                <div>ID：{{ item.shareId }}</div>
                <div>创建时间：{{ item.addTime }}</div>
              </div>
              <div class="handle-box">
                <el-dropdown>
                  <el-button type="primary">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      @click.native="operate(1, item)"
                      v-if="item.state == 1">
                      关闭活动
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click.native="operate(2, item)"
                      v-if="item.state == 0">
                      开启活动
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="operate(3, item)">清理投票数据</el-dropdown-item>
                    <el-dropdown-item @click.native="operate(4, item)">删除活动</el-dropdown-item>
                    <el-dropdown-item @click.native="operate(5, item)">创建同配置活动</el-dropdown-item>
                    <el-dropdown-item @click.native="operate(6, item)">数据导出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <!-- 图片展示 -->
            <div class="img_box">
              <div class="active_status" v-if="item.state == 1">
                <img :src="item.over ? ended : ongoing" alt="" />
              </div>
              <div class="guanbi" v-if="item.state == 0">活动已关闭</div>
              <img :src="item.cover" />
              <div class="shijianqujian">
                <i class="fa fa-clock-o"></i>
                {{ item.startTime }} - {{ item.endTime }}
              </div>
            </div>
            <div class="active_info">
              <div>
                <p style="color: rgba(77, 115, 225, 1); margin-top: 21px">
                  {{ item.players }}
                </p>
                <p style="margin-bottom: 19px">选手数</p>
              </div>
              <div>
                <p style="color: rgba(149, 64, 244, 1); margin-top: 21px">
                  {{ item.ticket }}
                </p>
                <p style="margin-bottom: 19px">投票数</p>
              </div>
              <div>
                <p style="color: rgba(18, 76, 224, 1); margin-top: 21px">
                  {{ item.viewNum }}
                </p>
                <p style="margin-bottom: 19px">浏览量</p>
              </div>
            </div>
            <div class="btn_box">
              <el-button type="primary" @click="btnLink('/Create', item)" icon="el-icon-edit-outline">活动修改</el-button>
              <el-button @click="btnLink('/Items', item)" icon="el-icon-s-custom">选手管理</el-button>
              <el-button @click="btnLink('/VoteData', item)" icon="el-icon-s-data">投票统计</el-button>
            </div>
            <el-button type="primary" style="margin:0 2%;width:96%;" icon="el-icon-share" @click="qrcodeShade(item)">查看活动链接及二维码</el-button>
          </li>
        </ul>
        <el-pagination
          :page-size="pageSize"
          :pager-count="11"
          layout="prev, pager, next"
          style="margin-top:20px"
          @current-change="setPage"
          :total="recordCount">
        </el-pagination>
        <div class="page"></div>
        <!-- 没有数据的时候展示 -->
        <el-empty description="还没创建活动信息~！" v-if="actData.length == 0" style="padding-top:150px"></el-empty>
      </center>
    </div>
      <!-- 展示分享二维码和链接 -->
    <div class="wxshade" v-if="qrcodeShow">
      <div class="alert_con">
        <div class="alert_tit">{{qrcodeTitle}}</div>
        <div class="close" @click="qrcodeShade()">X</div>
        <div class="con">
          <p>二维码</p>
          <vue-qr :text="qrcodeUrl" :size="300"></vue-qr>
          <p>链接地址</p>
          <input type="text" id="qrcodeUrl" v-model="qrcodeUrl" readonly >
          <p style="font-size:14px;color:#666"> 点击活动修改，可调整优化活动的界面样式，规则介绍等</p>
          <div @click="copyQrcodeUrl" class="fuzhi">复制</div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import vueQr from 'vue-qr'
import User from '../../utils/user'
import Export from '../../utils/export' 

export default {
  name: 'Manage',
  components: {
    Header,
    Footer,
    vueQr
  },
  data () {
    return {
      ongoing: require('../assets/img/jinxingzhong.png'),
      ended: require('../assets/img/jiesu.png'),
      userInfo: {},
      actData: [],
      qrcodeShow: false,
      qrcodeTitle: '',
      qrcodeUrl: '',
      page: 1, 
      pageSize: 9,
      recordCount: 0,
      pageCount: 0,
      mpUrl: 'https://wx.jdytp.com/'
    }
  },
  created () {
    this.setTitle('投票活动管理');
    this.userInfo = User.getInfo();
    if(!User.getToken() || !this.userInfo) {
      this.$router.replace('/Login');
      return;
    }
    this.getData()
  },
  methods: {
    // 按钮跳转页面
    btnLink(url, item) {
      if(url == '/Create') {
        this.$router.push({
          path: url,
          query: {
            code: item.shareId
          }
        })
      } else if(url == '/Items') {
        this.$router.push({
          path: url,
          query: {
            code: item.shareId,
            title: item.title,
            tempId: item.tempId
          }
        })
      } else if(url == '/VoteData') {
        if(this.userInfo.level < 3) {
          this.$alert('该功能只对企业版及以上会员开放', {type:'warning'});
          return;
        }
        this.$router.push({
          path: url,
          query: {
            code: item.shareId
          }
        })
      }
    },
    setPage(n){
      if(n<1) n=1;
      this.page = n;
      this.getData();
    },
    // 获取数据进行渲染
    getData () {
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.2)'
      });
      Ajax.get('activity/list', {
        page: this.page,
        size: this.pageSize
      }).then(data => {
        loading.close();
        if (data.code === 0) {
          this.actData = data.data.data;
          this.pageCount = data.data.pageCount;
          this.recordCount = data.data.recordCount;
        } else {
          this.$message.error(data.msg)
        }
      }).catch(err=>{
        loading.close();
        console.error(err);
        this.$message.error('网络错误，获取数据失败');
      })
    },
    // 操作按钮
    operate (e, item) {
      if (e === 1) {
        this.$confirm('关闭该活动后投票页面将无法被访问，确定关闭?', '确定要关闭该活动吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          // 关闭活动或者开启活动，state?0,1
           Ajax.get('activity/change/'+item.shareId + '?state=0').then(res=>{
            if(res.code == 0) {
              this.$alert('关闭成功', {type:'success'});
              item.state = 0;
            } else {
              this.$alert(res.msg, {type:'warning'});
            }
          }).catch(err=>{
            console.error(err);
            Toast('网络错误，操作失败');
          });
        }).catch(() => {
        })
      } else if (e === 2) {
        this.$confirm('开启活动后投票页面将被允许访问，确定开启？', '确定要开启该活动吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          Ajax.get('activity/change/'+item.shareId + '?state=1').then(res=>{
            if(res.code == 0) {
              this.$alert('开启成功', {type:'success'});
              item.state = 1;
            } else {
              this.$alert(res.msg, {type:'warning'});
            }
          }).catch(err=>{
            console.error(err);
            Toast('网络错误，操作失败');
          });
        }).catch(() => {
        })
      } else if(e==3){
        this.$confirm('确定要清除该活动所有投票数据？', '确认清除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(()=>{
          // 清除投票数据
          Ajax.get('activity/clear/' + item.shareId).then(res=>{
            if(res.code == 0) {
              this.$alert('清除成功', {type:'success'});
              this.getData();
            } else {
              this.$alert(res.msg, {type:'warning'});
            }
          }).catch(err=>{
            console.error(err);
            Toast('网络错误，操作失败');
          })
        }).catch(()=>{
        });
      } else if (e === 4) {
        this.$confirm('删除后将不可恢复！确定删除？', '确定要删除该活动么？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          // 删除活动
          Ajax.delete('activity/delete/' + item.shareId).then(res=>{
            if(res.code == 0) {
              this.$alert('删除成功', {type:'success'});
              this.getData();
            } else {
              this.$alert(res.msg, {type:'warning'});
            }
          }).catch(err=>{
            console.error(err);
            Toast('网络错误，操作失败');
          })
        }).catch(() => {
        })
      } else if (e === 5) {
        this.$confirm('确定要创建相同配置的活动？', '创建活动?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          // 复制一个相同的活动
          Ajax.get('activity/clone/' + item.shareId).then(res=>{
            if(res.code == 0) {
              this.$alert('活动创建成功', {type:'success'});
              this.getData();
            } else {
              this.$alert(res.msg, {type:'warning'});
            }
          }).catch(err=>{
            console.error(err);
            Toast('网络错误，操作失败');
          })

        }).catch(() => {
        })
      } else if(e == 6) {
        //数据导出
        Export.exportPlayers(item.shareId);
      }
    },
    // 处理二维码
    qrcodeShade(item) {
      if(item) {
        this.qrcodeTitle = item.title;
        this.qrcodeUrl = this.mpUrl + item.tempId + '/index.html?act=' + item.shareId;
        this.qrcodeShow = true;
      } else {
        this.qrcodeShow = false;
      }
    },
    copyQrcodeUrl () {
      var Url = document.getElementById('qrcodeUrl')
      Url.select()
      document.execCommand('Copy')
      Toast('复制成功~！')
    }
  }
}
</script>
<style src="@/assets/css/manage.css"  scoped></style>
